<template>
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="editVisible"
    >
      <el-form
        v-loading="loading"
        label-width="105px"
        ref="editForm"
        :model="editForm">

        <el-form-item label="标题:" prop="title" :rules="[
                              {required: true, message:'请输入标题', trigger:'blur'}
                             ]">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="统计组件:" prop="type"
                        :rules="[{required: true, message:'请选择统计组件', trigger:'blur'}]">
            <el-select clearable v-model="editForm.type"  placeholder="请选择">
              <el-option
                v-for="item in $dictUtils.getDictList('statisticsModelType')"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)">
              </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="SQL1:" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" prop="oneValueSql" :rules="[
                              {required: true, message:'请输入SQL1', trigger:'blur'}
                             ]">
          <el-input type="textarea" :rows="3" v-model="editForm.oneValueSql"></el-input>
        </el-form-item>
        <el-form-item label="后缀1:" prop="oneValueSuffix" :rules="[
                              {required: false, message:'请输入后缀1', trigger:'blur'}
                             ]">
          <el-input v-model="editForm.oneValueSuffix"></el-input>
        </el-form-item>
        <el-form-item label="SQL2:" autosize prop="twoValueSql" >
          <el-input type="textarea" :rows="3" v-model="editForm.twoValueSql"></el-input>
        </el-form-item>
        <el-form-item label="后缀2:" prop="twoValueSuffix" >
          <el-input v-model="editForm.twoValueSuffix"></el-input>
        </el-form-item>
        <el-form-item label="SQL3:" autosize prop="threeValueSql" >
          <el-input type="textarea" :rows="3" v-model="editForm.threeValueSql"></el-input>
        </el-form-item>
        <el-form-item label="后缀3:" prop="threeValueSuffix" >
          <el-input v-model="editForm.threeValueSuffix"></el-input>
        </el-form-item>
        <el-form-item label="变量字符" prop="varString" >
          <el-input v-model="editForm.varString"></el-input>
          <br>
          <el-link type="warning" :underline="false">变量字符,底部字符串显示 例如:环比下降 #{oneValueSql}# 同比增长 #{twoValueSql}#</el-link>
        </el-form-item>
        <el-form-item label="图标:" prop="icon" >
          <el-input v-model="editForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="描述:" prop="describes" >
          <el-input v-model="editForm.describes"></el-input>

        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footer-input">
          <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
          >确定</el-button
          >
        <el-button size="small" @click="close()">取消</el-button>

        </div>

      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {save, getById} from '@/api/StatisticsModel.js';

  export default {
    components: {},
    data() {
      return {
        loading: false,
        areaLabel: {},
        method: '',
        title: '',
        editForm: {
          id: '',
          title: '',
          type: '',
          describe: '',
          oneValueSql: '',
          twoValueSql: '',
          threeValueSql: '',
          fourValueSql: '',
          fiveValueSql: '',
          oneValueSuffix: '',
          twoValueSuffix: '',
          threeValueSuffix: '',
          varString: '',
          icon: '',
          state: ''
        },
        editVisible: false,
        detailsVisible: false,
        tableData1: [],
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        props: 1,
        dialogVisible: false,
        query: ''
      }
    },
    methods: {
      select(e) {
        this.editForm.companyName = e.names
        this.editForm.companyId = e.id
        this.dialogVisible = false
        console.log(e)
      },
      init(method, obj) {
        if (method === 'add') {
          this.editVisible = true
          this.$nextTick(() => {
            this.$refs.editForm.resetFields()
            // this.editForm = {}
          })
          this.editForm.id = ''
          this.editForm.title = ''
          this.editForm.type = ''
          this.editForm.describe = ''
          this.editForm.oneValueSql = ''
          this.editForm.twoValueSql = ''
          this.editForm.threeValueSql = ''
          this.editForm.fourValueSql = ''
          this.editForm.fiveValueSql = ''
          this.editForm.oneValueSuffix = ''
          this.editForm.twoValueSuffix = ''
          this.editForm.threeValueSuffix = ''
          this.editForm.varString = ''
          this.editForm.icon = ''
          this.editForm.state = ''
          this.title = '新增'
          this.visible = true
          this.loading = false
        } else if (method === 'edit') {
          this.editVisible = true
          this.method = method
          this.title = '修改'
          console.log(obj.id)
          this.$set(this.editForm, 'id', obj.id);
          this.$nextTick(() => {
            this.loading = true
            if (method === 'edit' || method === 'view') { // 修改或者查看
              getById({id: this.editForm.id}).then((res) => {
                if (res.data.code === '200') {
                  this.editForm = res.data.result
                  this.loading = false
                } else {
                  this.loading = false
                  this.visible = false
                  this.$message({
                    type: 'error',
                    message: res.data.message
                  })
                }
              })
            }
          })
          this.visible = true
          this.loading = false
        }

      },
      close() {
        this.editVisible = false
      },
      doSubmit() {
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            save(this.editForm).then((res) => {
              if (res.data.code === '200') {
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                this.editVisible = false
                this.$emit('refreshDataList')
              }
            })
          }
        })
      }
    },
    mounted() {

    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-dialog {
    .el-form {
      .el-input__inner {
        width: 320px;
      }

      .inputAppend-wrapper {
        .el-input__inner {
          width: 282px;
        }
      }
    }
  }
</style>
